<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>申请店铺</title>
    <link rel="stylesheet" href="../style/reset.css"/>

    <link href="../css/mui.css" rel="stylesheet"/>
    <link href="../font1218/iconfont.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/Apply-shop.css"/>
    <script src="../javascript/jquery-2.1.1.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="../js/mui.js"></script>

    <script type="text/javascript" charset="utf-8">
        var winW = document.documentElement.clientWidth;
        var desW = 640;
        var scale = desW / 100;
        document.documentElement.style.fontSize = winW / scale + "px";
        if(winW > desW){
            document.documentElement.style.fontSize = "100px";
        }
        mui.init();
    </script>
</head>
<body>

<div style="background:#fff;" class="wrapbox" id="wrapbox">
    <!-- 头部 -->
    <header style="background:#fff;" class="mui-bar mui-bar-nav">
        <a style="display: inline-block;vertical-align: middle" class=" mui-icon iconfont mui-icon-arrowleft icon-xiangzuojiankuohao "></a>
        <h1 class="mui-title">申请店铺</h1>
    </header>
    <!-- 身份证照片 -->
  <!--  <section class="id-card">
    <h5>身份证照片</h5>
    <p>请勿必上传本人照片，并保证信息清晰，否则无法通过审核</p>
    <div class="id-card-img">
        <div class="mui-row">
            <div class="cus-id mui-col-sm-6 mui-col-xs-6">
                <a href="#"><img src="img/id-card.png" alt=""/></a>
                <p style="color:#000;">身份证正面</p>
            </div>
            <div class="cus-id mui-col-sm-6 mui-col-xs-6">
                <a href="#"><img src="img/id-card.png" alt=""/></a>
                <p style="color:#000;">身份证反面</p>
            </div>
        </div>
    </div>
    </section>-->

    <!-- 身份证照片 -->
    <section class="id-card">
        <h5>身份证照片</h5>
        <p>请勿必上传本人照片，并保证信息清晰，否则无法通过审核</p>
        <div class="id-card-img">
            <div class="mui-row">
                <div id="cus-id" class="cus-id mui-col-sm-6 mui-col-xs-6">
                    <input id="fileBtn3" class="fileBtn3" type="file" style="opacity: 0"  onchange="upload('#fileBtn3', '#img3');" accept="image/*" multiple/>
                    <img id="img3"  class="img3"  src="img/id-card.png" alt=""/>
                    <p style="color:#000;">身份证正面</p>
                </div>
                <div class="cus-id mui-col-sm-6 mui-col-xs-6">
                    <input id="fileBtn4" class="fileBtn3" type="file" style="opacity: 0" onchange="upload('#fileBtn4', '#img4');" accept="image/*" multiple/>

                    <img id="img4" class="img4" src="img/id-card.png" alt=""/>
                    <p style="color:#000;"> 身份证反面</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 身份证信息 -->
    <section class="id-info">
        <h5>身份信息</h5>
        <p>真实姓名<!--<span>沈金斌</span>--></p>
        <p>身份证号<!--<span>452226********9999</span>--></p>
        <p>手机号（作为商家帐号）<!--<span>15810086112</span>--></p>
        <p style="float:left;">短信验证码<input type="text" style="width:3rem;height:.2rem;border:none;"/><a>获取短信码</a></p>
    </section>
    <!-- 公司资质文件 -->
    <section class="uploading-file">
        <h5>公司类资质文件图片 <span>（若非公司类型，请不必上传）</span></h5>
        <div id="file-img" class="file-img">
             <input id="fileBtn1" class="fileBtn1" type="file" style="opacity: 0"  onchange="upload('#fileBtn1', '#img1');" accept="image/*" multiple/>
            <img id="img1" class="img1" src="img/file.png" alt=""/>
            <input id="fileBtn2" class="fileBtn2" type="file" style="opacity: 0" onchange="upload('#fileBtn2', '#img2');" accept="image/*" multiple/>
            <img id="img2" class="img2" src="img/file.png" alt=""/>
        </div>
    </section>
    <!-- 底部提交认证 -->
    <section class="footer-btn">
        <a href="Apply-waiting.html"><button type="button" class="mui-btn mui-btn-warning">提交认证</button></a>
    </section>
</div>


<script>


    var upload = function(c, d){
        "use strict";
        var $c = document.querySelector(c),
                $d = document.querySelector(d),
                file = $c.files[0],
                reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
            $d.setAttribute("src", e.target.result);
        };
    };

</script>

</body>
</html>